/**
 * 级联选择器
 * @author xiaoxujs
 */

import { FC, useEffect, useState } from "react";
import { SelectBox, SelectListUl, SelectTreeLi, SelectTreeUl } from "./style";

interface Option {
    value: string;
    label: string;
    children?: Option[];
}

export const SelectTree: FC<{
    selectTreeList: Option[]
}> = ({
    selectTreeList
}) => {
        const [selectUlShow, setselectUlShow] = useState(false);
        const [listData, setListData] = useState<Option[][]>([]);
        useEffect(() => {
            let arr:Option[]  = [];
            selectTreeList.forEach(element => {
                arr.push({
                    value: element.value,
                    label: element.label,
                    children: element.children ? element.children : []
                })
            });
            setListData([arr])
            return () => {

            }
        }, [selectTreeList])

        const handleFocus = () => {
            console.log('光标进入了');
            setselectUlShow(true)
        }
        const handleBlur = () => {
            console.log('光标离开了')
            setselectUlShow(false);
        }
        const handleClick = (data: Option) => {
     
        }
        return (
            <SelectBox>
                <div className="input_box">
                    <input type="search" readOnly onFocus={() => handleFocus()} onBlur={() => handleBlur()} />
                    <div className="input_right">
                        <span className="iconfont">&#xe601;</span>
                    </div>
                </div>
                <SelectListUl show={selectUlShow}>
                    {
                        listData.map(item => <SelectTreeUl>
                            {
                                item.map(element => <SelectTreeLi  onClick={() => handleClick(element)}>
                                    {element.label} 
                                    {(element.children &&  element.children?.length > 0) && <span className="iconfont">&#xe626;</span>} 
                                </SelectTreeLi>)
                            }
                        </SelectTreeUl>)
                }
                </SelectListUl>
            </SelectBox>
        )

    }
export default SelectTree;
